<template>
  <div>
    <div class="base_header" style="text-align: left;margin-bottom: 20px">
      <span style="font-size: 30px;font-weight: normal;">
        课程审核
      </span>
      <span style="font-size: 10px">课程审核</span>
    </div>
    <div>
      <el-collapse>
        <el-collapse-item  name="1">
          <template slot="title">
            <div style="padding: 20px;">
              <span style="font-size: 20px;font-weight: bold">
                功能面板
              </span>
              <span style="font-size: 14px;color: gray">
                (点击查看详情)
              </span>
            </div>
          </template>
          <div style="padding: 20px">
            <div class="el-col-20" style="">
              <el-form label-position="left" v-model="queryData">
                <el-col :span="6">
                  <el-form-item label="方向">
                    <el-select v-model="queryData.directionId">
                      <el-option
                        label="全部"
                        :value="0">
                      </el-option>
                      <el-option
                        v-for="item in directionData"
                        :label="item.name"
                        :value="item.directionId"
                        :key="item.directionId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="分类">
                    <el-select v-model="queryData.sortId">
                      <el-option
                        label="全部"
                        :value="0">
                      </el-option>
                      <el-option
                        v-for="item in sortData"
                        :label="item.name"
                        :value="item.sortId"
                        :key="item.sortId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="作者">
                    <el-input type="text" v-model="queryData.userName" style="width: auto"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <div class="el-col-4" style="padding-left: 20px;border-left: 1px solid #f1f1f1;">
              <div>
                <el-button
                  type="primary"
                  @click="toGet"
                >查询
                </el-button>
                <!--<el-button type="success"
                           style="margin-left: 10px"
                           @click="dialogVisible = true"
                >新增</el-button>-->
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div>
      <el-table
        :data="courseList"
        style="width: 100%">
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
          <span>
            {{scope.$index + 1 +  (page - 1) * pageSize}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="directionName"
          label="方向">
        </el-table-column>
        <el-table-column
          prop="sortName"
          label="分类">
        </el-table-column>
        <el-table-column
          label="课程状态">

          <template slot-scope="scope">
            <el-tag v-if="scope.row.state==0" type="info">未发布</el-tag>
            <el-tag v-if="scope.row.state==2" type="success">完结</el-tag>
            <el-tag v-if="scope.row.state==1" type="warning">连载</el-tag>
            <el-tag v-if="scope.row.state==3" type="danger">封禁</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          label="审核状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.reviewState==1" type="warning">待审核</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="toDetail(scope.row)">查看</el-button>

            <el-popconfirm
              title="确定不通过吗？"
              @onConfirm="toFabuFail(scope.row.courseId)" >
              <el-button size="mini"
                         slot="reference"
                         type="danger" >不通过</el-button>

            </el-popconfirm>
            <el-button size="mini" type="success" @click="toFabuSuccess(scope.row.courseId)">通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" style="text-align: center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="确认不通过？"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <el-form label-position="left" label-width="10%">
          <el-form-item label="原因">
            <el-input type="textarea"
                      v-model="failData.message"
                      rows="4"
                      style="width: 80%"
                      maxlength="100"
                      show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CourseAudit',
  data () {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      directionData: [],
      sortData: [],
      courseList: [],
      queryData: {},
      dialogVisible: false,
      failData: {
        courseId: '',
        message: ''
      }
    }
  },
  mounted () {
    this.getAllDirection()
    this.getAllSort()
    this.getSizeCourse()
    this.getAllCourse(this.page, this.pageSize)
  },
  methods: {

    getSizeCourse () {
      var _this = this
      var queryData = JSON.parse(JSON.stringify(this.queryData))
      this.$axios.post('/api/course/getSizeAuditCourse',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.total = data.result
          }
        })
    },
    getAllCourse (page, pageSize) {
      var _this = this
      var queryData = JSON.parse(JSON.stringify(this.queryData))
      queryData.page = page
      queryData.pageSize = pageSize
      this.$axios.post('/api/course/getListAuditCourse',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseList = data.result
          }
        })
    },
    getAllDirection () {
      var _this = this
      this.$axios.post('/api/direction/getAllDirection')
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.directionData = data.result
          }
        })
    },
    getAllSort () {
      var _this = this
      this.$axios.post('/api/sort/getAllSort')
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.sortData = data.result
          }
        })
    },
    // 下方分页点击
    handleCurrentChange (page) {
      this.page = page
      this.getAllCourse(page, this.pageSize)
    },
    toGet () {
      this.getSizeCourse()
      this.getAllCourse(1, this.pageSize)
    },
    toDetail (row) {
      this.$router.push(
        {path: '/learn',
          query: {
            courseId: row.courseId
          }
        }
      )
    },
    toFabuSuccess (courseId) {
      var _this = this
      this.$axios.post('/api/course/updateCourseState',
        this.$qs.stringify({
          'courseData': JSON.stringify({
            courseId: courseId,
            reviewState: 2,
            state: 1
          })
        })
      )
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '审核通过'
            })
          } else {
            _this.$message({
              type: 'error',
              message: '失败，请重试!'
            })
          }
        })
    },
    toFabuFail (courseId) {
      var _this = this
      this.$axios.post('/api/course/updateCourseState',
        this.$qs.stringify({
          'courseData': JSON.stringify({
            courseId: courseId,
            reviewState: 3
          })
        })
      )
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '已审核，未通过!'
            })
            _this.toGet()
          } else {
            _this.$message({
              type: 'error',
              message: '失败，请重试!'
            })
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
